<script lang="ts" setup>
import { createUser, CreateUserParams } from "@/api/modules/system";
import { getRandomAvatar } from "@/api/modules/system/common";
import { message } from "@/utils/message";
import { cloneDeep } from "@pureadmin/utils";
import type { PlusColumn } from "plus-pro-components";
import { PlusDrawerForm } from "plus-pro-components";
import "plus-pro-components/es/components/drawer-form/style/css";
import { ref } from "vue";

// 定义 emit 事件，用于通知父组件刷新数据
const emit = defineEmits(["refresh"]);

const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ]
};

const state = ref<CreateUserParams>({
  username: "",
  password: "",
  nickname: null,
  email: null,
  phone: null,
  status: 1,
  avatar: null
});
const initState = cloneDeep(state.value);

const columns: PlusColumn[] = [
  {
    label: "用户名",
    width: 140,
    prop: "username",
    valueType: "copy"
  },
  {
    label: "密码",
    width: 120,
    prop: "password"
  },
  {
    label: "昵称",
    width: 120,
    prop: "nickname",
    valueType: "input"
  },
  {
    label: "邮箱",
    width: 120,
    prop: "email",
    valueType: "input"
  },
  {
    label: "手机号",
    width: 120,
    prop: "phone",
    valueType: "input"
  },
  {
    label: "头像",
    width: 120,
    prop: "avatar",
    tooltip: "头像地址"
  },
  {
    label: "状态",
    width: 120,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: 1
      },
      {
        label: "禁用",
        value: 0
      }
    ]
  }
];

const visible = ref(false);

const handleOpen = () => {
  visible.value = true;
};

const handleCancel = () => {
  visible.value = false;
  state.value = cloneDeep(initState);
};

const handleConfirm = async () => {
  await createUser(state.value).then(res => {
    if (res.success) {
      message("创建成功", { type: "success" });
      // 触发 refresh 事件，通知父组件刷新表格数据
      emit("refresh");
      handleCancel();
    }
  });
};
</script>

<template>
  <el-button type="primary" @click="handleOpen"> 创建新用户 </el-button>
  <PlusDrawerForm
    v-if="visible"
    v-model:visible="visible"
    v-model="state"
    title="创建新用户"
    size="25%"
    :form="{ columns, rules, labelPosition: 'right' }"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
    <template #plus-field-password>
      <el-input
        v-model="state.password"
        type="password"
        show-password
        placeholder="请输入密码"
      />
    </template>
    <template #plus-field-avatar>
      <div class="w-full flex justify-between gap-2">
        <el-input v-model="state.avatar" placeholder="请输入头像地址" />
        <el-button
          type="primary"
          class="flex justify-end"
          @click="
            getRandomAvatar().then(res => {
              if (res.success) {
                state.avatar = res.data;
              }
            })
          "
        >
          随机头像
        </el-button>
      </div>
    </template>
  </PlusDrawerForm>
</template>
